<template>
	<view>
		<view class="">
			<view class="pro-content">
				<view class="pro-ul">
					<view class="pro-li" v-for="list in productList" :key="list.pid" @tap.stop="redirectDetail(list.pid)">
						<view class="pro-li-father">
							<view class="pro-li-content">
								<image class="pro-li-content-img" :src="list.logo"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				cate_id: 0,
				productList: []
			}
		},
		onLoad(option) {
			let _this = this
			_this.cate_id = option.cate_id
			_this.$nextTick(function () {
				_this.getProList()
			})
		},
		methods: {
			getProList() {
				let _this = this
				_this.http.apiResquest({
					url: 'api/index/other_list?cate_id=' + _this.cate_id,
					method: 'GET'
				}).then(res=>{
					_this.productList = res.list
					uni.setNavigationBarTitle({
						title: res.title
					})
				})
			},
			redirectDetail(pid){
				uni.navigateTo({
					url: '/pages/product/index?pid=' + pid
				})
			},
		}
	}
</script>

<style>
.pro-content{
	width: 94%;
	position: relative;
	left: 3%;
}
.pro-ul{
	display: flex;
	flex-wrap: wrap;
	
}
.pro-li{
	width: 33%;
	margin-top: 20rpx;
}
.pro-li-father{
	width: 90%;
	position: relative;
	left: 5%;
}
.pro-li-content{
	width: 100%;
	height: 150rpx;
	box-shadow: 1rpx 1rpx 1rpx #888888 inset;
	border-radius: 10rpx;
}
.pro-li-content-img{
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
}
.pro-li-text{
	width: 100%;
	position: relative;
	top: -100rpx;
	color: #FFFFFF;
}
.pro-li-text-content{
	width: 100%;
	text-align: center;
	height: 30rpx;
	line-height: 30rpx;
}

</style>
